<template>
  <a
    class="wioc-tab-item"
    :style="$parent.value === id ? activeStyle : {}"
    @click="onItemClicked">
    <div class="wioc-tab-item-icon" v-if="$parent.fixBottom"><slot name="icon"></slot></div>
    <div class="wioc-tab-item-label"><slot></slot></div>
    <div class="wioc-tab-item-num" v-if="$parent.showNum"><slot name="num"></slot></div>
  </a>
</template>

<script>
export default {
  name: 'wiocTabItem',
  computed: {
    activeStyle () {
      return {
        color: this.$parent.activeColor,
		fontSize: this.$parent.fontSize,
		fontWeight:this.$parent.fontWeight
      }
    }
  },
  data () {
    return {
      id: (this.$parent.$children.length || 1) - 1
    }
  },
  methods: {
    onItemClicked () {
      this.$parent.$emit('input', this.id)
    }
  }
}
</script>

<style>
.wioc-tab-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  text-align: center;
  position: relative;
}

.wioc-tab-item-icon {
  margin: 0 auto 5px;
}
.wioc-tab-item-num{
  position: absolute;
  top: -0.05rem;
  right: -0.07rem;
  width: 20px;
  line-height: 20px;
  background: #F66464;
  font-family: DINAlternate-Bold;
  font-size: 10px;
  color: #FFFFFF;
  letter-spacing: -1px;
  border-radius: 50%;
  text-align: center;
}

</style>
